<template>
	<view class="notice-detail">
		<view class="title">
			关于我们，相关介绍
		</view>
		<view class="source">
			<view class="author">
				sham
			</view>
			<view class="time">
				<uni-dateformat :date="new Date()" format="yyyy-MM-dd hh:mm:ss"></uni-dateformat>
			</view>
		</view>
		<div class="content">
			<!-- <mp-html :content="noticeData.content" /> -->
			<rich-text :nodes="text"></rich-text>
		</div>
		<div class="footer">
			阅读：{{ noticeData.view_count }}
		</div>
	</view>
</template>

<script setup>
	import {
		getNoticeDetail
	} from '@/api/requestInterface.js'

	const noticeData = ref({})

	const text = ref(
		`<p>欢迎识别二维码添加好友。</p>
		<p><img src="/static/my_wechat.jpg" style="max-width:100%;" contenteditable="false"/></p>
		<p>本壁纸项目，所有图片均采集于互联网，在壁纸信息中，均设置了图片来源。</p><p><br/></p><p>开发的这个壁纸项目，用于学习交流，非商业使用，图片来自于用户上传。</p>`
	)

	onLoad((e) => {
		loadNoticeData(e.id)
	})

	// 获取公告详情内容(可使用接口内容展示，亦可写入个人相关信息)
	const loadNoticeData = async (id) => {
		const {
			errCode,
			data
		} = await getNoticeDetail({
			id: id
		})
		if (errCode === 0) {
			noticeData.value = data
		}
	}
</script>

<style lang="scss" scoped>
	.notice-detail {
		padding: 35rpx 15rpx 0;

		.title {
			font-weight: 600;
			font-size: 36rpx;
		}

		.source {
			display: flex;
			align-items: center;
			color: $text-shallow-color;
			font-size: 28rpx;
			padding: 35rpx 0;

			.time {
				margin-left: 20rpx;
			}
		}

		.footer {
			padding-top: 20rpx;
			color: $text-shallow-color;
			font-size: 24rpx;
		}
	}
</style>